<template>
  <div class="app-title-bar">
    <div class="app-title-bar-position" v-if="props.type === TitleType.position">
      <div class="title-left">
        <slot></slot>
      </div>
      <div class="title-right">
        <slot name="right" />
      </div>
    </div>
    <div class="app-title-bar-default" v-else>
      <div class="title-left">
        <slot></slot>
      </div>
      <div class="title-right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { reactive } from 'vue'

const TitleType = reactive({
  static: 'static',
  position: 'position'
})


interface Props {
  type?: 'static' | 'position'
}

const props = withDefaults(defineProps<Props>(), {
  type: 'static'
})

</script>
<style lang="scss">
@import "./index";
</style>
